<div class="width-100">
    <es-header [title]="'租户管理'" [class]="'tenants'"></es-header>
</div>
<div class="page-background">
    <div class="page-container">
        <div class="display-flex" style="position: relative;">
            <input placeholder="输入关键字搜索" [(ngModel)]="searchStr" class="search-input" type="text" (keypress)="search($event)" />
            <div class="search-icon" (click)="search()"></div>
            <div style="flex: 1;" class="display-flex flex-end">
                <div class="down-load" (click)="downloadPdf()"></div>
            </div>
        </div>
        <div id="pdf">
            <es-table [headers]="headers" (sortEvent)="sortEvent($event)" [datas]="datas" #table>
                <ng-template let-data>
                    <es-table-column [header]="data.h" [data]="data.d" [field]="'name'">
                        <div class="name" (click)="openSlider(data.d)">{{data.d.name}}</div>
                    </es-table-column>
                    <es-table-column [header]="data.h" [data]="data.d" [field]="'cpu'">
                        <div [ngClass]="{'red-tip':isOver(data.d.cpu)}">{{data.d.cpu}}</div>
                    </es-table-column>
                    <es-table-column [header]="data.h" [data]="data.d" [field]="'network'">
                        <div [ngClass]="{'red-tip':isOver(data.d.network)}">{{data.d.network}}</div>
                    </es-table-column>
                    <es-table-column [header]="data.h" [data]="data.d" [field]="'disk'">
                        <div [ngClass]="{'red-tip':isOver(data.d.disk)}">{{data.d.disk}}</div>
                    </es-table-column>
                    <es-table-column [header]="data.h" [data]="data.d" [field]="'machine'">
                        {{data.d.machine}}
                    </es-table-column>
                </ng-template>
            </es-table>
        </div>
        <div class="pagination">
            <pagination [total]='totalCount' [(nowPage)]="nowPage" [pageSize]='pageSize' (paginationEvent)="paginationChange()"></pagination>
        </div>
    </div>
</div>